<template>
	<view class="page">
		<view class="header-line">互成一家</view>
		<scroll-view class="main-content" scroll-y="true" @scrolltolower="loadMore">
			<view class="header">
				<view class="header-name">招聘</view>
				<view class="header-actions"></view>
			</view>
			<view class="job-menu">
				<view class="active menu-item">
					<view class="icon" :style="`--icon: url(${ base_url }/static/img/zhiweiliebiao.svg)`"></view>
					<view>职位列表</view>
				</view>
				<view class="menu-item" @click="navigateToNextPage('/pages/applicationsList/applicationsList')">
					<view class="icon" :style="`--icon: url(${ base_url }/static/img/wodetoudi.svg)`"></view>
					<view>我的投递</view>
					<view class="count">{{ resume_submission_count ? resume_submission_count : 0 }}</view>
				</view>
				<view class="menu-item" @click="navigateToNextPage('/pages/myFavoriteJobs/myFavoriteJobs')">
					<view class="icon" :style="`--icon: url(${ base_url }/static/img/wodeshoucang.svg)`"></view>
					<view>我的收藏</view>
					<view class="count">{{ favorite_count ? favorite_count : 0 }}</view>
				</view>
			</view>
            <!-- <view class="job-filter">
				<view class="search-bar">
					<view class="icon" :style="`--icon: url(${ base_url }/static/img/sousuo.svg)`"></view>
					<input type="text" placeholder="搜索职位名称、公司名称">
				</view>
				<view class="filter-section">
					<view class="filter-group">
						<view class="group-name">工作性质</view>
						<view class="group-options">
							<view class="option-btn">全职</view>
							<view class="option-btn">实习</view>
							<view class="option-btn">校招</view>
							<view class="option-btn">校内社团/组织</view>
						</view>
					</view>
					<view class="filter-group">
						<view class="group-name">工作地点</view>
						<view class="group-options">
							<view class="option-btn">北京</view>
							<view class="option-btn">上海</view>
							<view class="option-btn">深圳</view>
							<view class="option-btn">杭州</view>
							<view class="option-btn">广州</view>
						</view>
					</view>
					<view class="filter-group">
						<view class="group-name">学历要求</view>
						<view class="group-options">
							<view class="option-btn">不限</view>
							<view class="option-btn">本科</view>
							<view class="option-btn">硕士</view>
							<view class="option-btn">博士</view>
						</view>
					</view>
					<view class="filter-group">
						<view class="group-name">发布时间</view>
						<view class="group-options">
							<view class="option-btn">不限</view>
							<view class="option-btn">今天</view>
							<view class="option-btn">三天内</view>
							<view class="option-btn">一周内</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="main">
				<view class="job-list">
					<view class="job-card" v-for="item in jobList" :key="item.id" @click="navigateToNextPage('/pages/jobInfo/jobInfo?id=' + item.id)">
						<view class="company-info">
							<view class="company-logo" :style="`--icon: url(${item.cicon})`"></view>
							<view class="company-meta">
								<view class="company-name">{{ item.cname }}</view>
								<view class="company-tags">
									<view class="tag" v-if="item.companyCount">{{ item.companyCount }}</view>
									<view class="tag" v-if="item.ctag">{{ item.ctag }}</view>
								</view>
							</view>
						</view>
						<view class="job-info">
							<view class="job-header">
								<view class="job-title">{{ item.jname }}</view>
								<view class="job-salary">{{ item.money }}</view>
							</view>
							<view class="job-tags">
								<view class="tag" v-for="tagItem in item.jtags" :key="tagItem">{{ tagItem }}</view>
							</view>
							<view class="job-meta">
								<view class="meta-items">
									<view class="meta-icon" :style="`--icon: url(${ base_url }/static/img/location.svg)`"></view>
									<view>{{ item.city }}</view>
								</view>
								<view class="meta-items">
									<view class="meta-icon" :style="`--icon: url(${ base_url }/static/img/education.svg)`"></view>
									<view>{{ item.level }}</view>
								</view>
								<view class="meta-items">
									<view class="meta-icon" :style="`--icon: url(${ base_url }/static/img/time.svg)`"></view>
									<view>{{ item.time }}</view>
								</view>
							</view>
							<view class="job-highlights">
								<view class="highlight-item" v-for="(jobHigh, index) in item.goods" :key="index">
									<view>{{ jobHigh }}</view>
								</view>
							</view>
						</view>
						<view class="job-status">
							<view class="status-tag" :style="`--c: ${item.statusTextColor}; --bg: ${item.statusBgColor}`">{{ item.status }}</view>
							<view class="action-btn">{{ item.isDeliver ? '查看投递详情' : '立即投递' }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
// 业务层
import { base_url } from '../../server/config';
import { loadJobs, getJobStatusData } from '../../service/job';

// 锁
let lock = true;

export default {
	data() {
		return {
			base_url,
			jobList: [],
			total_duration: "",
			resume_submission_count: "",
			favorite_count: "",
		}
	},
	methods: {
		navigateToNextPage(url) {
			uni.navigateTo({ url });
		},
		loadMore() {
			if (lock) { return ; }
			lock = true;
			let lastId = this.jobList[this.jobList.length - 1].id;
			console.log('滑动到了页面底部', lastId);
			loadJobs(this, lastId).then(() => {
				lock = false;
			});
		}
	},
	onLoad() {
		// 加载工作
		loadJobs(this).then(() => {
			lock = false;
		});
	},
	onShow() {
		getJobStatusData(this);
	}
}

</script>

<style>
.main-content {
	padding: 0;
	background-color: #f5f5f5;
}

.header {
	width: 100%;
	height: 17vmin;
	box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4vmin;
    background-color: #fff;
}

.header .header-name {
    font-size: 4.5vmin;
    font-weight: 600;
	padding-left: 5vmin;
}

.header .header-actions {
    display: flex;
    gap: 2vmin;
}

.header .btn {
    display: flex;
    align-items: center;
    gap: 1vmin;
    padding: 1.5vmin 3vmin;
    border-radius: 4.5vmin;
    background: #07c160;
    color: #fff;
    border: none;
    font-size: 3.5vmin;
}

.header .icon {
	width: 6vmin;
	height: 6vmin;
	background-image: var(--icon);
}

.header .text {
	font-size: 3.5vmin;
}

.job-menu {
    display: flex;
    gap: 3vmin;
    padding: 3vmin 5vmin;
    background: #fff;
    border-bottom: 0.25vmin solid #f0f0f0;
    overflow-x: auto;
    /* -webkit-overflow-scrolling: touch;
    scrollbar-width: none; */
}

.job-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 1.5vmin;
    /* padding: 2vmin 4vmin; */
    border-radius: 5vmin;
    font-size: 3.5vmin;
    color: #666;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s ease;
}

.job-menu .menu-item.active {
    background: #07c160;
    color: #fff;
	padding: 2vmin 4vmin;
}

.job-menu .menu-item .icon {
	width: 6vmin;
	height: 6vmin;
	background-image: var(--icon);
}

.job-menu .menu-item .count {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 4.5vmin;
    height: 4.5vmin;
    padding: 0 1.5vmin;
    border-radius: 2.25vmin;
    font-size: 3vmin;
    background: #0000001a;
}

.job-filter {
	width: calc(100% - 10vmin);
    background-color: #fff;
    border-radius: 3vmin;
	margin: 5vmin;
    padding: 5vmin;
	box-sizing: border-box;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.job-filter .search-bar {
    display: flex;
    align-items: center;
    gap: 2vmin;
    padding: 3vmin 4vmin;
    background: #f5f5f5;
    border-radius: 2vmin;
    margin-bottom: 5vmin;
}

.job-filter .search-bar .icon {
    width: 5vmin;
    height: 5vmin;
	background-image: var(--icon);
}

.job-filter .search-bar input {
    flex: 1;
    border: none;
    background: none;
    font-size: 3.5vmin;
    color: #333;
    outline: none;
}

.job-filter .filter-section {
    display: flex;
    flex-direction: column;
    gap: 5vmin;
}

.job-filter .filter-group {
    display: flex;
    flex-direction: column;
    gap: 3vmin;
}

.job-filter .group-name {
    font-size: 3.5vmin;
    font-weight: 500;
    color: #333;
}

.job-filter .group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2vmin;
}

.job-filter .option-btn {
    padding: 1.5vmin 3vmin;
    border-radius: 4vmin;
    font-size: 3.5vmin;
    background: #f5f5f5;
    color: #666;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}

.main {
	width: 100%;
	box-sizing: border-box;
}

.main .job-list {
	width: 100%;
	margin-top: 4vmin;
	padding: 0 5vmin;
	padding-bottom: 8vmin;
	border-radius: 3vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000a;
	display: flex;
    flex-direction: column;
    gap: 4vmin;
	box-sizing: border-box;
}

.main .job-card {
	background: #fff;
    border-radius: 3vmin;
    padding: 5vmin;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.main .company-info {
    display: flex;
    gap: 4vmin;
    margin-bottom: 4vmin;
}

.main .company-logo {
	--size: 12vmin;
    width: var(--size);
    height: var(--size);
    border-radius: 2vmin;
    background-image: var(--icon);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.main .company-meta {
    flex: 1;
}

.main .company-name {
    font-size: 4vmin;
    font-weight: 500;
    margin-bottom: 2vmin;
    color: #333;
}

.main .company-tags {
    display: flex;
    gap: 2vmin;
}

.main .tag {
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
    font-size: 3vmin;
    background: #f5f5f5;
    color: #666;
}

.main .job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vmin;
}

.main .job-title {
    font-size: 4.5vmin;
    font-weight: 600;
    color: #333;
}

.main .job-salary {
    font-size: 4vmin;
    font-weight: 600;
    color: #ff4081;
}

.main .job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2vmin;
    margin-bottom: 3vmin;
}

.main .job-meta {
    display: flex;
    gap: 4vmin;
    margin-bottom: 4vmin;
    color: #666;
}

.main .meta-items {
    display: flex;
    align-items: center;
    gap: 1vmin;
    font-size: 3.5vmin;
}

.main .meta-items .meta-icon {
	width: 4vmin;
	height: 4vmin;
	background-image: var(--icon);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.main .job-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 3vmin;
    margin-bottom: 4vmin;
    padding: 3vmin;
    background: #f8f8f8;
    border-radius: 2vmin;
}

.main .highlight-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
}

.main .highlight-item > view {
    font-size: 3.5vmin;
    color: #07c160;
}

.main .job-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main .status-tag {
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
    font-size: 3vmin;
	background-color: var(--bg);
    color: var(--c);
}

.main .action-btn {
    padding: 2vmin 4vmin;
    border-radius: 5vmin;
    font-size: 3.5vmin;
    background: #07c160;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}
</style>
